<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/page/third/jquery-1.11.3.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/page/third/jcloud/js/jqcloud-1.0.4.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/page/third/jcloud/css/jqcloud.css" />
<link type="text/css" rel="stylesheet"
	href="${pageContext.request.contextPath}/page/third/bootstrap/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet"
	href="${pageContext.request.contextPath}/page/third/bootstrap/css/bootstrap.css" />
<link type="text/css" rel="stylesheet"
	href="${pageContext.request.contextPath}/page/style/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet"
	href="${pageContext.request.contextPath}/page/style/css/home.css" />

<script type="text/javascript"
	src="${pageContext.request.contextPath}/page/third/bootstrap/js/bootstrap.min.js"></script>


<script type="text/javascript">

	$(function() {
		$(document).scroll(function() {
			var window_H = $(window).height();
			// 当屏幕滚出第一屏时，我们让这个按钮出现。
			var h2 = $(document).scrollTop();
			// 判断
			if (h2 >= window_H) {
				// 当第一屏即将要滚出去的时候我们要显示返回顶部按钮
				$('.back_top').css('display', 'block');
			} else {
				$('.back_top').fadeOut(400);
			}
		});
		// 点击图片按钮的时候让我们的页面返回到顶部
		$('.back_top').click(function() {
			$('html,body').animate({
				'scrollTop' : 0
			});
		});
		$('.back_top').hover(function() {
			$('.back-to-top').hide();
			$('#back_top_font').show();
		}, function() {
			$('.back-to-top').show();
			$('#back_top_font').hide();
		});
		
	});
	function goPage(currentPage) {
		$("#hidePage").val(currentPage);
		$("#searchforms").submit();
	}
	function goArticleDetails(articleid){
		window.location.href="${pageContext.request.contextPath}/home/goArticleDetails.do?articleid="+articleid;
	}
</script>
</head>
<body class="nav-fixed">
	<!--导航条  -->
	<jsp:include page="/WEB-INF/mypage/website/home_nav.jsp"></jsp:include>

	<!--主页面  -->
	<div id="zyn-bodyer"></div>
	<div class="container theme-showcase" role="main">
		<div class='col-md-9 main'>
				<!--面包屑导航  -->
				<ol class="breadcrumb">
					<li><a href="#">Home</a></li>
					<li><a href="#">2013</a></li>
					<li class="active">十一月</li>
				</ol>
			<form id="searchforms" action="${pageContext.request.contextPath}/home/goIndex.do">
				<input type="hidden" name="currentPage" id="hidePage">
			</form>
			<article class="excerpt excerpt-first">
				<!--分类 及标题-->
				<c:forEach items="${Page.result}" var="article">
					<header>
						<a class="cat" href="#">${article.typeName}<i></i></a>
						<h2>
							<a class="article-title" href="/Archives/Index/1" title="标题">${article.title}</a>
						</h2>
					</header>
					<p class="meta">
						<span><i
							class="glyphicon glyphicon-calendar span-blank-before"
							style="color: #45bcf9;"></i>
						<fmt:formatDate value="${article.releasedate}"
								pattern="yyyy/MM/dd" /></span> <span><i class="icon-eye-open"
							style="color: #45bcf9;"></i>浏览(<a href="#">${article.scans}</a>)</span>
						<span><i class="icon-comment-alt" style="color: #45bcf9;"></i>评论(<a
							href="/Archives/Index/1#comments-title">${article.comments}</a>)</span>
						<span> <i class="icon-heart-empty" style="color: #ff5e5c;"></i>(<a
							data-id="1" href="/">${article.replies}</a>)
						</span>
					</p>
					<p class="note">
						<c:if test="${fn:length(article.content)>500}">
						${fn:substring(article.content, 0, 500)}&hellip;
					</c:if>
						<c:if test="${fn:length(article.content)<=500}">
						${article.content}
					</c:if>
					</p>
					<footer class="entry-footer">
						<span class="tags-links" style="color: #1abc9c;"> <i
							class=" icon-tags"></i> <c:forEach items="${article.tags}"
								var="tag">
								<a class="tags-label" href="/">${tag }</a>
							</c:forEach>
						</span> <a class="read-more" onclick="goArticleDetails('${article.id}')">继续阅读 »</a>
					</footer>
			</article>
			<article class="excerpt excerpt-first">
				</c:forEach>

				<!-- 分页 -->
				<div style="margin: 0 auto; text-align: center;">
					<ul class="pagination">
						<c:if test="${Page.pageNum>=1}">
							<li><a href="javascript:void(0)" onclick="goPage('1');">首页</a></li>
						</c:if>
						<c:if test="${Page.pageNum>5}">
							<li><a href="javascript:void(0)"
								onclick="goPage('${Page.pageNum-5}');">&laquo;</a></li>
						</c:if>
						<c:if test="${Page.pageNum>1}">
							<li><a href="javascript:void(0)"
								onclick="goPage('${Page.pageNum-1}');">&lsaquo;</a></li>
						</c:if>
						<c:forEach var="i" begin="${Page.startPage}" end="${Page.endPage}"
							step="1">
							<c:if test="${Page.pageNum==i}">
								<li class="active"><a id="page" href="javascript:void(0)">${i}</a></li>
							</c:if>
							<c:if test="${Page.pageNum!=i}">
								<li><a href="javascript:void(0);" onclick="goPage('${i}');">${i}</a></li>
							</c:if>
						</c:forEach>
						<c:if test="${Page.endPage<Page.pages}">
							<li><a href="javascript:void(0)">&hellip;</a></li>
						</c:if>
						<c:if test="${Page.pageNum<Page.pages}">
							<li><a href="javascript:void(0)"
								onclick="goPage('${Page.pageNum+1}');">&rsaquo; </a></li>
							<c:if test="${Page.pageNum+5<=Page.pages }">
								<li><a href="javascript:void(0)"
									onclick="goPage('${Page.pageNum+5}');"> &raquo; </a></li>
							</c:if>
						</c:if>
						<li><a href="javascript:void(0)"
							onclick="goPage('${Page.pages}');">尾页</a></li>
					</ul>
				</div>
		</div>
		<div class='col-md-3 sidebar'>
			<!--侧边栏目  -->
			<jsp:include page="/WEB-INF/mypage/website/aside.jsp"></jsp:include>
		</div>
	</div>


</body>

</html>
